<template>
  <div class="datail flex">
    <div class="coverImg">
      <div class="big">
        <img :src="data.imgAltas[currentimgAltas].src | srcFormat" alt="" />
      </div>
      <div class="img-list">
        <div
          class="img-item"
          v-for="(item, index) in data.imgAltas"
          :key="item.src"
          :class="{ current: currentimgAltas === index }"
          @mouseenter="currentimgAltas = index"
        >
          <img :src="item.src | srcFormat" alt="" />
        </div>
      </div>
    </div>
    <div class="info">
      <!-- 商品信息 -->
      <div class="good-info">
        <div class="name">{{ data.seriesTitle }}</div>
        <div class="des">{{ data.seriesSubTitle }}</div>
        <div class="price">
          {{ data.coin }}
          <div class="imgsa">
            <img src="../../assets/images/home/monad.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 分类 -->
      <div class="cate">
        <div class="cate-name">选择{{ data.parameterJson[0].title }}</div>
        <div class="flex">
          <div
            v-for="item in data.parameterJson[0].parameters"
            :key="item.id"
            class="cate-item"
            :class="{ active: item.id == $route.query.id }"
            @click="changeCate(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="opt">
        <div class="count">
          数量：<span>*礼品库存{{ data.stock }}件</span>
        </div>
        <!-- 步进器 -->
        <div class="step">
          <span @click="reduceTotal">-</span
          ><input type="text" v-model="buyCount" /><span @click="addTotal"
            >+</span
          >
        </div>
        <div class="btns flex">
          <div class="btn add" @click="addToCart">加入购物车</div>
          <div class="btn duihuan">立即兑换</div>
        </div>
        <!-- 分享 -->
        <vshare :vshareConfig="vshareConfig"></vshare>
      </div>
    </div>
  </div>
</template>
 
<script>
import { toast } from "../../utils/toast";
import { addToCarApi } from "../../http/api";
import vshare from "vshare";
export default {
  props: ["data"],
  data() {
    return {
      buyCount: 1,
      currentimgAltas: 0,
      // 分享功能的配置
      vshareConfig: {
        // 此处放分享列表（ID）
        shareList: ["weixin", "qzone"],
        //此处放置分享按钮设置
        share: [{ bdSize: 24 }],
        //此处放置浮窗分享设置
        slide: false,
      },
    };
  },
  components: { vshare },
  created() {
    if (this.$route.query.id) {
      localStorage.setItem("detailId", this.$route.query.id);
    }
  },
  methods: {
    changeCate(id) {
      // 不能直接给route 的query属性赋值 不提升
      // console.log(id);
      // this.$route.query.id = id;
      this.$router.push(this.$route.path + "?id=" + id);
    },
    addTotal() {
      // 如果已经超过库存就不能再增加
      if (this.buyCount >= this.data.stock)
        return toast("超出库存！", "warning");
      this.buyCount++;
    },
    reduceTotal() {
      if (this.buyCount <= 1) return toast("数量至少一件", "warning");
      this.buyCount--;
    },
    addToCart() {
      // 判断登录了没有
      // 如果没有登录 向服务器发请求
      // console.log(this.$store.state.userInfo.coin);
      if (!this.$store.state.userInfo.coin) {
        this.$store.commit("modifyShowLogin", true);
        return toast("请先登陆", "warning");
      }
      // 如果已经登陆 向服务器发请求
      addToCarApi({
        productId: this.$route.query.id,
        total: this.buyCount,
      }).then((res) => {
        // console.log(res);
        if (res.code === 0) {
          toast("添加至购物车成功", "success");
          this.$store.commit("updateTopHeadKey");
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.datail {
  width: 970px;
  box-sizing: border-box;
  .coverImg {
    float: left;
    .big {
      width: 459px;
      margin-bottom: 20px;
      img {
        width: 100%;
      }
    }
    .img-list {
      display: flex;
      justify-content: space-between;
      .img-item {
        opacity: 0.5;
        width: 100px;
        height: 100px;
        cursor: pointer;
        &.current {
          opacity: 1;
        }
        img {
          width: 100%;
        }
      }
    }
  }
  .info {
    padding-left: 30px;
    font-family: SourceHanSansSC;
    flex: 1;
    .good-info {
      border-bottom: 1px solid #ccc;
      .name {
        font-size: 28px;
        font-weight: 400;
        color: #000000;
      }
      .des {
        font-size: 14px;
        font-weight: 300;
        color: #999999;
        line-height: 28px;
      }
      .price {
        font-size: 28px;
        font-weight: bold;
        color: #fd604d;
        line-height: 72px;
        .imgsa {
          width: 20px;
          height: 20px;
          margin-left: 5px;
          display: inline-block;
          img {
            width: 100%;
          }
        }
      }
    }
    .cate {
      .cate-name {
        font-size: 16px;
        font-weight: 300;
        color: #000000;
        line-height: 34px;
      }
      .flex {
        flex-wrap: wrap;
        .cate-item {
          cursor: pointer;
          width: 76px;
          height: 32px;
          border: 1px solid #d1d1d1;
          text-align: center;
          line-height: 32px;
          margin: 0 20px 20px 0;
          &.active {
            border-color: #0a328e;
            color: #0a328e;
          }
        }
      }
    }
  }
  .opt {
    .count {
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      line-height: 60px;
      color: #000000;
      span {
        color: #666;
        font-weight: normal;
      }
    }
    .step {
      span {
        width: 30px;
        height: 32px;
        border: 1px solid #d1d1d1;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      input {
        width: 46px;
        height: 32px;
        padding: 0 5px;
        border: 1px solid #d1d1d1;
        border-left: 0 solid #000;
        border-right: 0 solid #000;
        text-align: center;
      }
    }
    .btns {
      padding-top: 20px;
      .btn {
        width: 150px;
        height: 46px;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 46px;
        margin-right: 20px;
        &.add {
          background: #3dc36b;
        }
        &.duihuan {
          background-color: #fd604d;
        }
      }
    }
  }
}
</style>